<template>
  <van-sticky>
    <THeader title="公告详情"></THeader>
  </van-sticky>
  <div class="content">
    <p class="title">{{title}}</p>
    <div class="mid" style="font-size: 12px;">
      <span style="padding-right: 30px">{{sender}}</span>
      <!--      <span>信息工程学院</span>-->
      <span style="padding-left: 60px">{{collegeID}}</span>
    </div>
    <pre style="font-size: 14px;padding: 2vw" class="pre">{{ content }}</pre>
  </div>
</template>

<script>
import {onMounted, ref} from "vue"
import {getNotify} from '/@/api/getNotify';
import {useRoute, useRouter} from "vue-router/dist/vue-router";
export default {
  setup(){
    const content = ref();
    const route = useRoute();
    const id = route.query.id;
    const title = ref("");
    const sender = ref("");
    const collegeID = ref("");


    const initData = async () =>{
      await getNotify().then(res =>{
        const data = res.response.value.extend;
        for (let i = 0; i < data.notices.length; i++)
        {
          if(data.notices[i].id == id)
          {
            title.value = data.notices[i].title;
            sender.value = data.notices[i].sender;
            collegeID.value = data.notices[i].collegeID;
            content.value = data.notices[i].content;
            console.log(content.value)
          }
        }
      }).catch(error => {
        console.error(error);
      });
    }

    onMounted(()=>{
      initData();
    })

    return{
      content,
      title,
      collegeID,
      sender
    }
  }
}
</script>

<style scoped lang="less">
.content{
  background-color:#ffffff;
  color: #9a9b9d;
  //border-radius: 10vw;
  margin: 3vw;
  padding: 3vw 0 3vw 0;
}
.title{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
}

.mid{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0 5px 0;
}

.pre {
  overflow: hidden;
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-word;

}

html, body, #app {
  height: 100%!important;
  background-color: #f8f8f8;
}

</style>

